<script setup lang="ts">
import { Search, RefreshRight } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { fetchGetSocietyAppliesList } from '@/api/manage/checkCenter/society'
import { IFormInfo } from "./types"
import InfoDialog from './infoDialog.vue'
import { usePublicStoreHook } from '@/store/modules/public'
import { filterDate } from '@/utils/format'

// 表单数据
let tableData = reactive([])

const ruleFormRef = ref<FormInstance>()
// 分页组件的值 ----------------------------------------------------------------开始

// 实际传递的条件
const listQuery = reactive<IFormInfo>({
  college: undefined,
  type: undefined,
  cardEnable: undefined,
  currentPage: 1,
  gender: undefined, // 性别
  stuCode: undefined, // 学号
  major: undefined, // 专业
  grade: undefined, // 年级
  name: undefined,// 姓名s
  status: 0,
  applyType: undefined,
  personType: 'admin',   // president--社团部长查看列表，  admin--管理员查看列表
})
// 显示在界面上的查询条件
const showQuery = reactive<IFormInfo>({
  college: undefined,
  type: undefined,
  cardEnable: undefined,
  currentPage: 1,
  gender: undefined, // 性别
  stuCode: undefined, // 学号
  major: undefined, // 专业
  grade: undefined, // 年级
  name: undefined, // 姓名
  applyType: undefined,
  personType: 'admin',   // president--社团部长查看列表，  admin--管理员查看列表
})
// 列表总数
const total = ref<number>(0)

// 分页组件的值 ----------------------------------------------------------------结束
const rules = reactive<FormRules>({
  college: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  major: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  grade: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  classes: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  name: [
    {
      message: '请输入',
      trigger: 'change',
    },
  ],
  studentNumber: [
    {
      message: '请输入',
      trigger: 'change',
    },
  ]
})

// 申请类型
const applyTypeOptions = reactive([
  {
    id: 1,
    name: '创建社团'
  },
  {
    id: 2,
    name: '社团信息修改'
  },
  {
    id: 3,
    name: '解散社团'
  },
  {
    id: 4,
    name: '社团换届'
  },
])

// 查询
const handleSearch = () => {
  getPageList()
}
// 重置验证规则
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  getPageList()
}

onMounted(() => {
  getPageList()
})
const tableLoading = ref(false)

// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  const res = await fetchGetSocietyAppliesList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  tableData = data
  tableLoading.value = false
}
let goodsFormDialog = ref(false);
let dialogData = ref({}) // 弹框数据
/**
 * 查看
 */
const checkForm = (value: boolean, row?: object) => {
  // TODO 弹出查看表单
  goodsFormDialog.value = value;
  if (row) {
    const list = usePublicStoreHook().societyTypeList
    list.forEach(item => {
      if (item.id == row.type) {
        row.type = item.name
      }
    })
    dialogData.value = row
  } else {
    getPageList()
  }
};

// 过滤申请类型
const filterApplyType = (val: number) => {
  let applyStr = ''
  applyTypeOptions.forEach((item) => {
    if (item.id == val) {
      applyStr = item.name
    }
  })
  return applyStr
}
</script>

<template>
  <div class="form-container">
    <el-form ref="ruleFormRef" :model="listQuery" :rules="rules" class="search-content" size="default" status-icon
      :label-width="80">
      <el-form-item label="申请类型:">
        <el-select v-model="listQuery.applyType" class="m-2 select-item" placeholder="请选择" clearable>
          <el-option v-for="item in applyTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <!-- <el-input v-model="listQuery.name" clearable /> -->
      </el-form-item>
      <el-form-item label="申请人:" placeholder="请输入" clearable>
        <el-input v-model="listQuery.name" clearable />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)" :icon="RefreshRight" class="btn-white">重置</el-button>
        <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div class="main-content container">
      <el-table :data="tableData" stripe style="min-height: 40rem" v-loading="tableLoading">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="User.name" label="申请人" show-overflow-tooltip />
        <el-table-column label="申请类型" show-overflow-tooltip>
          <template #default="scope">
            <div>
              {{ filterApplyType(scope.row.applyType) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="申请理由" show-overflow-tooltip>
          <template #default="scope">
            <div>
              {{ scope.row.reason ? scope.row.reason : '--' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="申请时间" show-overflow-tooltip>
          <template #default="scope">
            <div>
              {{ filterDate(scope.row.createdAt) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="申请状态" show-overflow-tooltip>
          <template #default="scope">
            <div class="check-wait">
              {{ scope.row.status == 0 ? '待审批' : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="250">
          <template #default="scope">
            <div class="theme-success">
              <el-button type="primary" class="btn-white"  @click="checkForm(true, scope.row)">审批</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize"
        hide-on-single-page @pagination="getPageList" />
    </div>
    <!-- 查看弹框 -->
    <InfoDialog ref="infoDialog" :goodsFormDialog="goodsFormDialog" @closeDialog="checkForm(false)"
      :dialogData="dialogData" />
  </div>
</template>

<style scoped lang="scss">
.form-container {
  height: 100%;
  display: grid;
  grid-template-rows: 8rem auto;
  gap: 1rem;

  .search-content {
    // padding: 0rem 1.5rem;
    display: flex;
    align-items: center;

    .el-form-item {
      line-height: 3rem;
      height: 3rem;
      width: 30rem;
    }

    .select-item {
      width: 100%;
    }

  }

  .main-content {
    background-color: #fff;
    padding-bottom: 2rem;

    .operate-box {
      display: flex;
      align-items: center;
    }
  }

}
</style>